<template>
  <j-modal title="编辑工作小组" :width="1100" :visible="visible" switchFullscreen @cancel="handleCancel" @ok="handleOk">
    <z-table ref="table" rowKey="id" :showAlert="false" :showPagination="false" :showSelection="false"
      :loading="loading" :columns="columns" :dataSource="pageData" @change="onTableChange" style="margin-top:20px;">
      <template slot="type" slot-scope="text, record, index">
        <a-select v-if="isEdit[index]" allowClear v-model="record.type" style="width:100%;" placeholder="请选择">
          <a-select-option value="1">组长</a-select-option>
          <a-select-option value="2">成员</a-select-option>
        </a-select>
        <span v-else>{{ record.type == '1' ? '组长' : '成员' }}</span>
      </template>
      <template slot="post" slot-scope="text, record, index">
        <a-select v-if="isEdit[index]" allowClear style="width:100%;" placeholder="请选择">
          <a-select-option v-for="(item, key) in postArr" :key="key" :value="item.value">{{ item.title }}
          </a-select-option>
        </a-select>
        <span v-else>{{ setTittle(record.post) }}</span>
      </template>
      <template slot="name" slot-scope="text, record, index">
        <a-input v-if="isEdit[index]" v-model="record.name" placeholder="请输入" style="width:100%;" />
        <span v-else>{{ record.name }}</span>
      </template>
      <template slot="gender" slot-scope="text, record, index">
        <a-select v-if="isEdit[index]" allowClear v-model="record.gender" style="width:100%;" placeholder="请选择">
          <a-select-option value="1">男</a-select-option>
          <a-select-option value="2">女</a-select-option>
        </a-select>
        <span v-else>{{ record.gender == '1' ? '男' : '女' }}</span>
      </template>
      <template slot="age" slot-scope="text, record, index">
        <a-input v-if="isEdit[index]" v-model="record.age" placeholder="请输入" style="width:100%;" />
        <span v-else>{{ record.age }}</span>
      </template>
      <template slot="phone" slot-scope="text, record, index">
        <a-input v-if="isEdit[index]" v-model="record.phone" placeholder="请输入" style="width:100%;" />
        <span v-else>{{ record.phone }}</span>
      </template>
      <!--操作-->
      <template slot="action" slot-scope="text, record, index">
        <a-space size="large">
          <a v-if="isEdit[index]" @click="onConfirm(index)">保存</a>
          <a v-else @click="onEdit(index)">编辑</a>
          <a-popconfirm title="是否要删除记录吗?" ok-text="是" cancel-text="否" @confirm="onDelete(index)">
            <a>删除</a>
          </a-popconfirm>
        </a-space>
      </template>
    </z-table>
  </j-modal>
</template>
<script>
import { getDictItemsFromCache } from '@/api/api'
export default {
  name: 'AddModal',
  data() {
    return {
      visible: false,
      columns: [
        {
          title: '成员类型',
          dataIndex: 'type',
          align: 'left',
          width: 130,
          scopedSlots: { customRender: 'type' }
        },
        {
          title: '工作单位及职务或身份',
          dataIndex: 'post',
          align: 'left',
          width: 200,
          scopedSlots: { customRender: 'post' }
        },
        {
          title: '姓名',
          dataIndex: 'name',
          align: 'left',
          width: 150,
          scopedSlots: { customRender: 'name' }
        },
        {
          title: '性别',
          dataIndex: 'gender',
          align: 'left',
          width: 130,
          scopedSlots: { customRender: 'gender' }
        },
        {
          title: '年龄',
          dataIndex: 'age',
          align: 'left',
          width: 120,
          scopedSlots: { customRender: 'age' }
        },
        {
          title: '联系方式',
          dataIndex: 'phone',
          align: 'left',
          width: 150,
          scopedSlots: { customRender: 'phone' }
        },
        {
          title: '操作',
          key: 'action',
          align: 'left',
          scopedSlots: { customRender: 'action' },
          width: 120
        }
      ],
      isEdit: [],
      postArr: getDictItemsFromCache('groupPost'),
      loading: false,
      pageFilter: {
        pageNo: 1,
        pageSize: 10,
      },
      pageData: {
        records: [{
          type: "1",
          post: "1",
          name: "张三",
          gender: "1",
          age: "18",
          phone: "13845632568",
        },]
      },
    }
  },
  async created() {

  },
  methods: {
    show() {
      this.visible = true
      this.isEdit = []
      this.pageData.records.forEach(item => {
        this.isEdit.push(false)
      })
    },
    onQuery() {
      this.pageFilter.pageNo = 1
      this.refreshTable()
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.refreshTable()
    },
    refreshTable() {
      this.loading = true
      peopleApi
        .wxSeedPersonList(this.pageFilter)
        .then((res) => {
          if (res.success) {
            this.pageData = res.result ? res.result : {}
            this.loading = false
          } else {
            this.loading = false
          }
        })
        .catch((e) => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },
    setTittle(text) {
      return this.$filterDictTextByCache('groupPost', text)  //现在字典中对应的文字，是全局函数
    },
    onEdit(index) {
      this.$set(this.isEdit, index, true)
    },
    onConfirm(index) {
      // console.log('11111111111111')
      // console.log(index, this.recordData[index].phoneNumber)
      // if (this.recordData[index].phoneNumber == '' || this.recordData[index].phoneNumber == undefined) {
      //   this.$message.warning('手机号码不能为空！')
      //   return
      // }
      // let flag = this.phoneValidata(this.recordData[index].phoneNumber)
      // if (flag) {
      //   this.$message.warning('手机格式不正确！')
      //   return
      // }
      // if (this.recordData[index].userName == '') {
      //   this.$message.warning('姓名不能为空！')
      //   return
      // }
      this.$set(this.isEdit, index, false)
    },
    onDelete(index) {
      this.pageData.records.splice(index, 1)
      this.isEdit.splice(index, 1)
      //页面跳到第一页
      this.loading = true
      setTimeout(() => {
        this.refreshTable()
      }, 1000)
    },
    handleCancel() {
      this.visible = false
    },
    handleOk() {
      this.visible = false
    }
  },
}
</script>
<style lang="less" scoped>
/deep/.ant-form-item {
  margin-bottom: 10px;
}
</style>
